<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Basics</title>
</head>
<body>

  <!-- Simple form -->
  <form action="formHandler.php" name="simple form" autocomplete="on">

    <input type="text" /><br>

    <select>
      <option value="Front-end">Front-end</option>
      <option value="Back-end">Back-end</option>
    </select><br>

    <textarea rows="10" cols="45" name="text"></textarea><br>

    <input type="submit"><br>

  </form>
  <hr>

  <!-- Fieldset & label -->
  <form action="formHandler.php" name="simple form2">

    <fieldset>

    <legend>Simple form legend</legend>

    <input type="text" /><br>

    <select>
      <option value="Front-end">Front-end</option>
      <option value="Back-end">Back-end</option>
    </select><br>

    <textarea rows="10" cols="45" name="text"></textarea><br>

    <input type="submit"><br>

    </fieldset>

  </form>
  <hr>

  <!-- Inner fieldset & label -->
  <form action="formHandler.php" name="simple form3">

    <fieldset>
      <legend>Personal data</legend>
      <input type="text" /><br>
      <select>
        <option value="Front-end">Front-end</option>
        <option value="Back-end">Back-end</option>
      </select><br>
    </fieldset>

    <fieldset>
      <legend>Personal Message</legend>
      <textarea rows="10" cols="45" name="text"></textarea><br>
    </fieldset>

    <input type="submit"><br>

  </form>
  <hr>

  <!-- Form element label -->
  <label for="username">Username</label>
  <input id="username"><br>

  <label>
    Password
    <input type="password">
  </label>
  <hr>

  <!-- Result form -->
  <form action="formHandler.php" name="simple form3">

    <fieldset>
      <legend>Personal data</legend>
      <label for="name">Your name</label>
      <input type="text" id="name" /><br>
      <label for="speciality">Choose your speciality</label>
      <select id="speciality">
        <option value="Front-end">Front-end</option>
        <option value="Back-end">Back-end</option>
      </select><br>
    </fieldset>

    <fieldset>
      <legend>Personal Message</legend>
      <label for="message">Enter your message</label>
      <textarea id="message" rows="10" cols="45" name="text"></textarea><br>
    </fieldset>

    <input type="submit"><br>

  </form>
  <hr>

  <!-- Textarea -->
  <textarea rows="10" cols="45"></textarea><br>
  <textarea rows="5" cols="20" name="test"></textarea><br>
  <textarea rows="5" cols="20" autofocus></textarea><br>
  <textarea rows="5" cols="20" disabled></textarea><br>
  <textarea rows="5" cols="20" readonly>This text you can't change</textarea><br>
  <textarea rows="5" cols="20" placeholder="your message..."></textarea><br>
  <textarea rows="5" cols="20" maxlength="5"></textarea><br>
  <textarea rows="5" cols="20" required></textarea><br>
  <hr>

  <!-- Required attribute -->
  <form>
    <textarea rows="5" cols="20" required></textarea><br>
    <input type="submit" value="Send">
  </form>
  <hr>

  <!-- Select -->
  <select>
    <option value="Front-end">Front-end</option>
    <option value="Back-end">Back-end</option>
  </select>
  <hr>

  <!-- Select with optgroup -->
  <select>
    <optgroup label="Speciality">
      <option value="Front-end">Front-end</option>
      <option value="Back-end">Back-end</option>
    </optgroup>

    <optgroup label="Direction">
      <option value="Mobile">Mobile development</option>
      <option value="Node">Node.js development</option>
    </optgroup>
  </select>
  <hr>

  <!-- Multiple select -->
  <select multiple>
    <option value="Front-end">Front-end</option>
    <option value="Back-end">Back-end</option>
  </select>
  <hr>

  <!-- Different options -->
  <select>
    <option value="Front-end">Front-end</option>
    <option value="Back-end" label="Back-end">
    <option value="sel" selected>Selected</option>
    <option value="dis" disabled>Disabled</option>
  </select>
  <hr>

</body>
</html>
